<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
    table tr:nth-child(odd){
        background-color: yellow;
    }
    table tr{
        text-align: center;
    }
    a{
        text-decoration: none;
        color: red;
    }
</style>
<body>
<div align="center">
    <table border="1" cellspacing="0" cellpadding="0" id="table">
        <tr>
            <td style="font-weight: bold;height: 80px;width: 600px;font-size: 25px;padding-bottom: 40px" colspan="8">花卉信息列表</td>
        </tr>
        <tr>
            <td style="text-align: right;" colspan="8">
                <a href="insert.jsp">增加花卉信息</a>
            </td>
        </tr>
    </table>
</div>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    window.onload=(function (){
        $.ajax({
            url:"/FlowerServlet",
            type:"post",
            dataType:"json",
            success:function (data){
                console.log(data);
                //将以上数据展示在网页中
                for (var i=0;i<data.length;i++){
                    var $tr=("<tr><td>"+data[i].id+"</td><td>"+data[i].name+"</td><td>"+data[i].anothername+"</td><td>"+data[i].property+"</td><td>"+data[i].price+"</td><td>"+data[i].production+"</td><td><input class='update' type='submit' value='修改'></td><td><input class='delete' type='submit' value='删除'></td></tr>");
                    $("#table").append($tr);
                }
            }
        })
    })


</script>
</html>
